<template>
	
	<!-- 时间段筛选 -->
	<div class="render-time" @click="state.showCalendar = true">
		<span v-if="state.renderDate"> {{ state.renderDate }} </span>
		<span v-else class="pleac">请选择</span>
		<van-icon class="van-cell__right-icon" name="arrow" />
	</div>
	
	<van-calendar
	  v-model:show="state.showCalendar"
	  type="range"
	  :min-date="state.minCalendar" 
	  :max-date="state.maxCalendar"
	  @close="onClose"
	  @confirm="onConfirm"
	  color="#D76A2C"
	  :allow-same-day="true"
	/>
</template>

<script setup>
	import { getcurrentTime } from '@/utils/function.js'
	
	const props = defineProps({
		startTime: '',
		endTime: '',
	})
	const emits = defineEmits(['update:startTime', 'update:endTime'])
	
	const computedDate = (time) => {
		const date = new Date(time)
		let year = date.getFullYear()
		let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 
		let days = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
		return year + '/' + month  + '/' + days
	}
	
	const state = reactive({
		showCalendar: false,
		minCalendar: new Date(2019, 0, 1),
		maxCalendar: new Date(),
		renderDate: '',
		Date: '',
	})
	
	const onClose = (val) => {
		state.showCalendar = false
	}
	
	const onConfirm = (val) => {
    
		let start = getcurrentTime(val[0], 'day', false)
		let end = getcurrentTime(val[1], 'day', false)
		
	
		state.renderDate = computedDate(start) + '-' + computedDate(end)
		state.Date = start + ',' + end

		emits('update:startTime', start)
		emits('update:endTime', end)
		state.showCalendar = false
	}

	
</script>

<style lang="scss" scoped>
.render-time {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	.pleac {
		color: #c8c9cc;
	}
}
</style>